
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap-grid.min.css" /><!--CSS RESET-->
<%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/owl.carousel.min.css">
<%--    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->--%>
    <link type="text/css" charset="utf-8" href="${pageContext.request.contextPath}/css/asd.css" rel="stylesheet">
</head>
<body>
<div class="demo">
    <div class="container">
        <div class="row text-center">
            <h1 class="white">书籍与智慧同在，读书与收获通行</h1>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="news-slider" class="owl-carousel">
                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="${pageContext.request.contextPath}/img/book1.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                            <p class="post-description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> June 5, 2016</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">Mockup</a>
                                    <a href="#">Graphics</a>
                                    <a href="#">Flayers</a>
                                </li>
                            </ul>
                            <a href="${pageContext.request.contextPath}/user/allbook" class="read-more">借阅</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="${pageContext.request.contextPath}/img/book2.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                            <p class="post-description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> June 5, 2016</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">Mockup</a>
                                    <a href="#">Graphics</a>
                                    <a href="#">Flayers</a>
                                </li>
                            </ul>
                            <a href="${pageContext.request.contextPath}/user/allbook" class="read-more">借阅</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="${pageContext.request.contextPath}/img/book3.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                            <p class="post-description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> June 5, 2016</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">Mockup</a>
                                    <a href="#">Graphics</a>
                                    <a href="#">Flayers</a>
                                </li>
                            </ul>
                            <a href="${pageContext.request.contextPath}/user/allbook" class="read-more">借阅</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="${pageContext.request.contextPath}/img/book4.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                            <p class="post-description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> June 7, 2016</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">Mockup</a>
                                    <a href="#">Graphics</a>
                                    <a href="#">Flayers</a>
                                </li>
                            </ul>
                            <a href="${pageContext.request.contextPath}/user/allbook" class="read-more">借阅</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="${pageContext.request.contextPath}/img/book5.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                            <p class="post-description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> June 9, 2016</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">Mockup</a>
                                    <a href="#">Graphics</a>
                                    <a href="#">Flayers</a>
                                </li>
                            </ul>
                            <a href="${pageContext.request.contextPath}/user/allbook" class="read-more">借阅</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <a href="#"><img src="${pageContext.request.contextPath}/img/book6.jpg" alt=""></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                            <p class="post-description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                            </p>
                            <ul class="post-bar">
                                <li><i class="fa fa-calendar"></i> June 11, 2016</li>
                                <li>
                                    <i class="fa fa-folder"></i>
                                    <a href="#">Mockup</a>
                                    <a href="#">Graphics</a>
                                    <a href="#">Flayers</a>
                                </li>
                            </ul>
                            <a href="${pageContext.request.contextPath}/user/allbook" class="read-more">借阅</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/owl.carousel.min.js"></script>
<script>
    $(document).ready(function() {
        $("#news-slider").owlCarousel({
            items:3,
            itemsDesktop:[1199,2],
            itemsDesktopSmall:[980,2],
            itemsMobile:[600,1],
            pagination:false,
            navigationText:false,
            autoPlay:true,
        });
    });
</script>
</body>
</html>
